/*
 * @Author: yixin 
 * @Date: 2019-11-24 21:11:44 
 * @Last Modified by: yixin
 * @Last Modified time: 2020-01-09 20:21:42
 * 今日工时分析
 */

import React, { Component } from "react"
import { withRouter } from "react-router"
import styles from './workTime.less'
import Header from '@/components/header';
import Pie from '@/components/pie';
import Bar from '@/components/bar';
import Time from '@/components/time'
import { formatDate, getChartColor } from '@/utils'
import { segmentWorkTime, equipWorkTime } from '@/services'
import md5 from 'js-md5';
class WorkTime extends Component {

  componentDidMount() {
    this.init()
  }

  init = async () => {
    try {
      this.renderPie()
      this.renderBar()
    } catch (error) {
      
    }
  }

  renderPie = async () => {
    try {
      const { worktime } = this.props.location.state
      const segmentTime = await segmentWorkTime({ beginDate: worktime.beginDate, endDate: worktime.endDate });
      if(segmentTime.code===200){
        let series = [
          { name: '行驶', value: (segmentTime.data.driveTime/3600).toFixed(1), itemStyle: { color: getChartColor['行驶'] } },
          { name: '驻车', value: (segmentTime.data.parkTime/3600).toFixed(1), itemStyle: { color: getChartColor['驻车'] } },
          { name: '泵送', value: (segmentTime.data.pumpTime/3600).toFixed(1), itemStyle: { color: getChartColor['泵送'] } },
          { name: '转场', value: (segmentTime.data.switchTime/3600).toFixed(1), itemStyle: { color: getChartColor['转场'] } },
          { name: '待料', value: (segmentTime.data.awaitTime/3600).toFixed(1), itemStyle: { color: getChartColor['待料'] } }
        ];
        this.pie.init([
          { data: [{ name: '总工时', value: ((segmentTime.data.driveTime+segmentTime.data.parkTime+segmentTime.data.pumpTime+segmentTime.data.switchTime+segmentTime.data.awaitTime)/3600).toFixed(1) }] },
          { data: series }
        ])
      }
    } catch (error) {
      console.log(error)
    }
  }

  renderBar = async () => {
    try {
      const { worktime } = this.props.location.state
      const equipTime = await equipWorkTime({ beginDate: worktime.beginDate, endDate: worktime.endDate });
      if(equipTime.code===200){
        let categories = [];
        let series = []
        categories.push(equipTime.data.profess.name);
        series.push({value: (equipTime.data.profess.time/3600).toFixed(2), itemStyle: { color: '#FB4033' }});
        equipTime.data.list.map((item)=>{
          categories.push(item.name);
          series.push((item.time/3600).toFixed(2));
        })
        this.bar && this.bar.init(categories, series)
      }
    } catch (error) {
      console.log(error)
    }
  }

  toPage = ({equipCode}) => {
    this.props.history.push(`carDetail?equipCode=${equipCode}&source=selfpage&token=${md5(equipCode+'selfpage'+'s$31d0dl1!~93-kHj^S')}`, { worktime: this.props.location.state.worktime })
  }
  
  render(){
    const { worktime } = this.props.location.state
    return (
      <div>
        <Header>工时分析</Header>
        <Time time={worktime.beginDate===worktime.endDate ? worktime.beginDate : `${worktime.beginDate}-${worktime.endDate}`} />
        <Pie unit="H" ref={el=>{ this.pie = el }} />
        <div className={styles.separator}></div>
        <Bar toPage={this.toPage} unit="H" ref={el=>{ this.bar = el }} />
      </div>
    )
  }
}
export default withRouter(WorkTime)
